<%@include file="../common/foot.jsp" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>eSHOP登录</title>

    <style type="text/css">
        .myTextInput {
            width: 450px;
        }
        .myVerifyInput {
            width: 300px;
        }
        .myButtonInput {
            width: 250px;
        }
    </style>
</head>
<body>
<div class="nk-container">
    <!-- 内容 -->
    <div class="main">
        <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
            <h3 class="text-center text-info border-bottom pb-3">登&nbsp;&nbsp;录</h3>
            <form method="post" action="${pageContext.request.contextPath}/jsp/user/user.do?method=login">
                <div class="form-group row">
                    <label for="username" class="col-sm-4 col-form-label text-right">账号:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control myTextInput"
                               value="${username}"
                               id="username" name="username" placeholder="请输入您的账号!" required>
                        <c:if test="${usernameMsg != null}">
                            <span class="mySpan" style="color: red">
                                    ${usernameMsg}
                            </span>
                        </c:if>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="password" class="col-sm-4 col-form-label text-right">密码:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control myTextInput"
                               id="password" name="password" placeholder="请输入您的密码!" required>
                        <c:if test="${passwordMsg != null}">
                            <span class="mySpan" style="color: red">
                                    ${passwordMsg}
                            </span>
                        </c:if>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
                    <div class="col-sm-4" >
                        <input type="text" class="form-control myVerifyInput" id="verifycode" name="code" placeholder="请输入验证码!">
                        <c:if test="${codeMsg != null}">
                            <span class="mySpan" style="color: red">
                                ${codeMsg}
                            </span>
                        </c:if>
                    </div>
                    <div class="col-sm-4">
                        <img src="${pageContext.request.contextPath}/jsp/code/kaptcha.do" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                        <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-8">
                        <input type="checkbox"
                               id="remember-me" name="rememberme">
                        <label class="form-check-label" for="remember-me">记住我</label>
                        <a href="#" class="text-danger float-right">忘记密码?</a>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-5 text-right">
                        <button type="submit" class="btn btn-info text-white form-control myButtonInput">立即登录</button>
                    </div>
                    <div class="col-sm-5 text-left">
                        <a href="${pageContext.request.contextPath}/jsp/user/userRegister.jsp">
                            <button type="button" class="btn btn-info text-white form-control myButtonInput">去注册</button>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>


<script>
    function refresh_kaptcha() {
        var path = "${pageContext.request.contextPath}/jsp/code/kaptcha.do?p=" + Math.random();
        $("#kaptcha").attr("src",path);
    }
</script>

</body>
</html>
